<template>
  <view class="quick-nav">
    <view class="nav-item" v-for="(item, index) in navList" :key="index" @tap="handleNavClick(item)">
      <image :src="commonStore.baseImageUrl + item.icon" mode="aspectFit" />
      <text>{{ item.name }}</text>
    </view>
  </view>
</template>

<script setup>
import { useCommonStore } from '@/store';

const commonStore = useCommonStore()
const navList = [
  { name: '购物车', iconName: 'card-icon', icon: 'test-yujia/mine/card-icon.png', url: '/pages/cart/index', type: 'cart' },
  { name: '我的订单', iconName: 'order-icon', icon: 'test-yujia/mine/order-icon.png', url: '/pages/subpackages/shopCenter/mine-order', type: 'order' },
  { name: '卡包', iconName: 'card-icon', icon: 'test-yujia/mine/order-icon.png', url: '/pages/coupon/index', type: 'coupon' },
  { name: '体测中心', iconName: 'test-icon', icon: 'test-yujia/mine/tice-icon.png', url: '/pages/profile/index', type: 'test' }
]

const handleNavClick = (item) => {
  if (item.type === 'order') {
    uni.navigateTo({ url: item.url })

  } else {
    commonStore.showCommonSoon()
  }
}
</script>

<style lang="scss">
.quick-nav {
  margin-top: 24rpx;
  background: rgba($color: #DADADA, $alpha: 0.4);
  border-radius: 12rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0rpx 3rpx 5rpx 0rpx rgba(199, 199, 199, 0.82);

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rpx;

    image {
      width: 38rpx;
      height: 38rpx;

      &.card-icon {
        width: 39rpx;
        height: 36rpx;
      }

      &.card-icon {
        width: 49rpx;
        height: 38rpx;
      }

      &.test-icon {
        width: 35rpx;
        height: 38rpx;
      }
    }

    text {
      font-size: 18rpx;
      color: #2F2F2F;
    }
  }
}
</style>